<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
    <script type="text/javascript" src="jquery-1.11.3.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!--简单的按钮组合-->
<div class="btn-group" role="group" aria-label="...">
    <button class="btn btn-danger" type="button">危险</button>
    <button class="btn btn-default" type="button">默认</button>
    <button class="btn btn-success" type="button">默认</button>
</div>
<!--按钮工具栏   几个组再次组合到一起-->
<div class="btn-toolbar" role="toolbar" aria-label="...">
    <div class="btn-group-vertical" role="group" aria-label="...">
        <button class="btn btn-default">1组1号</button>
        <button class="btn btn-default">1组2号</button>
        <button class="btn btn-default">1组3号</button>
    </div>
    <div class="btn-group-vertical" role="group" aria-label="...">
        <button class="btn btn-default">2组1号</button>
        <button class="btn btn-default">2组2号</button>
        <button class="btn btn-default">2组3号</button>
        <button class="btn btn-default">2组4号</button>
    </div>
</div>

<!--按钮与下拉的嵌套-->
<div class="btn-group" role="group" aria-label="...">
    <button class="btn btn-default" type="button">1</button>
    <button class="btn btn-default" type="button">2</button>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">下拉1</a></li>
            <li><a href="#">下拉2</a></li>
        </ul>
    </div>
</div>

<!--作用于两端对齐的按钮组=====-->
<div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group" role="group">
        <button class="btn btn-default" type="button">1按钮</button>
    </div>
    <div class="btn-group" role="group">
        <button class="btn btn-default" type="button">2按钮</button>
    </div>
    <div class="btn-group" role="group">
        <button class="btn btn-default" type="button">3按钮</button>
    </div>
</div>

<!--按钮式的下拉菜单===============-->
<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        实验
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉1</a></li>
        <li><a href="#">下拉2</a></li>
        <li><a href="#">下拉3</a></li>
        <li class="divider" role="separator"></li>
        <li><a href="#">下拉4</a></li>
    </ul>
</div>

<!--分列式的按钮下拉菜单组件===========-->
<div class="btn-group">
    <button type="button" class="btn btn-danger">分裂</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉1</a></li>
        <li><a href="#">下拉2</a></li>
        <li><a href="#">下拉3</a></li>
    </ul>
</div>
</body>
</html>